'use client'

import { useEffect, useState } from 'react'
// import GoogleMapReact from 'google-map-react'
import { Map, Marker } from 'react-amap'

const MyMap: React.FC = () => {
  const [mapComponentKey, setMapComponentKey] = useState('')

  useEffect(() => {
    setMapComponentKey(`${Math.random()}`)
  }, [])

  return (
    <div
      key={mapComponentKey}
      className='relative w-full h-[13.53125rem] lg:w-[25.3125rem] lg:h-[16.4375rem] bg-gray-100 2xl:w-[37.9375rem] 2xl:h-[24.6875rem]'
    >
      {/* <GoogleMapReact
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      /> */}
      <Map
        amapkey='2e6926177d93971c4fa203168d02dc0a'
        loading={<p>Loading...</p>}
        zoom={14}
        center={[112.60993, 37.74294]}
      >
        <Marker position={[112.60993, 37.74294]} />
      </Map>
    </div>
  )
}

export default MyMap
